<%--
  Created by IntelliJ IDEA.
  User: Teacher
  Date: 2025/9/12
  Time: 14:48
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>sayHello</title>
    <script>
        function f1() {
            // 1.获取Ajax引擎对象
            let xhr = new XMLHttpRequest();
            console.log(xhr);
            // 2.准备回调函数
            // 回调函数:响应回来之后调用的函数
            // 其属性值是一个函数类型
            // xhr.onreadystatechange = callback;
            xhr.onreadystatechange = function () {
                // console.log("Ajax请求状态:"+xhr.readyState)
                // console.log("Http请求状态:"+xhr.status)
                // 当Ajax请求状态的值为4时,说明Ajax请求已经返回响应了,此处需要基于这个响应结果做相应的处理
                // 当Http状态值为200时,表示响应成功,可以处理了
                if (xhr.readyState == 4 && xhr.status == 200) {
                    // 接收后端返回的数据
                    // responseText:返回响应的字符串数据
                    let result = xhr.responseText;
                    console.log(result)
                    document.getElementById("d1").innerHTML = result;
                }
            };

            // 3.建立与服务器的连接
            // 参数一:表示请求方式
            // 参数二:请求地址
            xhr.open("get", "${pageContext.request.contextPath}/sayHello");

            // 4.发送请求
            // send(参数)
            // 如果是get请求,请求参数会在请求地址中传递,因此,send方法的参数直接为null即可
            // 如果是post请求,需要传递请求参数
            xhr.send(null)
        }

        function callback() {

        }
    </script>
</head>
<body>
<button onclick="f1()">ajax</button>
<div id="d1"></div>
</body>
</html>
